<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>InfiniteCarousel jQuery Plugin Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="./js/infiniteCarousel/jquery.infinitecarousel.js"></script>
<script type="text/javascript">
$(function(){
	$('#carousel').infiniteCarousel({
		displayTime: 6000,
		textholderHeight : .25
	});
});
</script>
<style type="text/css">
body {
	padding-top: 50px;
}
#carousel {
	margin: 0 auto;
	width: 400px;
	height: 390px;
	padding: 0;
	overflow: scroll;
	border: 2px solid #999;
}
#carousel ul {
	list-style: none;
	width: 1500px;
	margin: 0;
	padding: 0;
	position: relative;
}
#carousel li {
	display: inline;
	float: left;
}
.textholder {
	text-align: left;
	font-size: small;
	padding: 6px;
	-moz-border-radius: 6px 6px 0 0;
	-webkit-border-top-left-radius: 6px;
	-webkit-border-top-right-radius: 6px;
}
</style>
</head>

<body>

<div id="carousel">
	<ul>
		<li><img alt="" src="https://fbcdn-photos-a.akamaihd.net/hphotos-ak-prn1/18747_103276323034519_571309_a.jpg" width="500" height="213" /><p>Hi there. I&#39;m 
		a caption for this image. If you click the pause icon in the upper right 
		hand corner you can pause the slideshow and restart it whenever you like.</p>
		</li>
		<li><img alt="" src="https://fbcdn-photos-a.akamaihd.net/hphotos-ak-prn1/18747_103276323034519_571309_a.jpg" width="500" height="213" /><p>This is the caption 
		for the second image. The image to the right has no caption. clicking the 
		left and right arrows will also pause the show.</p>
		</li>
		<li><img alt="" src="https://fbcdn-photos-a.akamaihd.net/hphotos-ak-prn1/18747_103276323034519_571309_a.jpg" width="500" height="213" /></li>
	</ul>
</div>
<h3>This is a basic example using three images.</h3>
<p>The carousel requires some basic CSS be applied to the list of images (see below). 
Note that in the list style (#carousel ul) that the width should equal the 
combined with of all of your images. For example, this demo uses three images, 
each having a width of 500px, therefore the width is set to 1500px:</p>
<code>#carousel ul {<br />
&nbsp;&nbsp;&nbsp; list-style: none;<br />
&nbsp;&nbsp;&nbsp; width: 1500px;<br />
&nbsp;&nbsp;&nbsp; margin: 0;<br />
&nbsp;&nbsp;&nbsp; padding: 0;<br />
&nbsp;&nbsp;&nbsp; position: relative;<br />
}<br />
#carousel li {<br />
&nbsp;&nbsp;&nbsp; display: inline;<br />
&nbsp;&nbsp;&nbsp; float: left;<br />
} </code>

</body>
</html>